<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="loading-wrapper">
    <div class="circle-container">
        <div class="ball-track">
            <div class="ball" style="animation-delay: 0.1s;"></div>
            <div class="ball" style="animation-delay: 1.1s;"></div>
            <div class="ball" style="animation-delay: 2.1s;"></div>
            <div class="ball" style="animation-delay: 3.1s;"></div>
            <div class="ball" style="animation-delay: 4.1s;"></div>
        </div>
        <div class="half-circle-top"></div>
        <div class="half-circle-bottom"></div>
    </div>
</div>
</body>
<style>
    .loading-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: transparent; /* 可根据需要加背景 */
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    .circle-container {
        position: relative;
        width: 250px;
        height: 100px;
        overflow: hidden;
    }

    .half-circle-top,
    .half-circle-bottom {
        width: 100px;
        height: 50px;
        background: #f0f0f0;
        position: absolute;
        left: 0;
    }

    .half-circle-top {
        top: 0;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        animation: rotateBounceTop 1s ease-in-out infinite;
        transform-origin: center bottom;
    }

    .half-circle-bottom {
        bottom: 0;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        animation: rotateBounceBottom 1s ease-in-out infinite;
        transform-origin: center top;
    }

    .ball-track {
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
    }

    .ball {
        width: 20px;
        height: 20px;
        background: #f0f0f0;
        border-radius: 50%;
        position: absolute;
        top: 40px;
        animation: dropBall 2s linear infinite;
    }

    @keyframes rotateBounceTop {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(-30deg);
        }
        100% {
            transform: rotate(0deg);
        }
    }

    @keyframes rotateBounceBottom {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(30deg);
        }
        100% {
            transform: rotate(0deg);
        }
    }

    @keyframes dropBall {
        0% {
            right: 10px;
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            right: 175px;
            opacity: 0;
        }
    }
</style>
</html>
